<template>
  <div id="app">
    <el-container>
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">

        <el-tab-pane label="普通验证码" name="tab1">
          <el-card>
            <el-button-group style="margin-bottom: 10px">
              <el-button type="primary" @click="changeSimpleImageType('spec')">常规</el-button>
              <el-button type="primary" @click="changeSimpleImageType('gif')">gif</el-button>
              <el-button type="primary" @click="changeSimpleImageType('chinese')">中文</el-button>
              <el-button type="primary" @click="changeSimpleImageType('chinese_gif')">中文gif</el-button>
              <el-button type="primary" @click="changeSimpleImageType('arithmetic')">简单算术</el-button>
            </el-button-group>
            <el-form v-model="simpleImageForm" inline>
              <el-form-item prop="code">
                <el-input v-model="simpleImageForm.code" placeholder="请输入验证码"></el-input>
              </el-form-item>
              <el-form-item>
                <div style="height:80px;width:120px">
                  <el-image :src="simpleImageUrl"></el-image>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="refreshSimpleImage">刷新</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="verifySimpleImage">验证</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-tab-pane>

        <el-tab-pane label="行为验证码" name="tab2">
          <el-button-group style="margin-bottom: 10px">
            <el-button type="primary" :disabled="loading" @click="changeBehaviorImageType('RANDOM')">随机</el-button>
            <el-button type="primary" :disabled="loading" @click="changeBehaviorImageType('SLIDER')">滑块验证码</el-button>
            <el-button type="primary" :disabled="loading" @click="changeBehaviorImageType('ROTATE')">旋转验证码</el-button>
            <el-button type="primary" :disabled="loading" @click="changeBehaviorImageType('CONCAT')">滑块还原验证码</el-button>
            <el-button type="primary" :disabled="loading" @click="changeBehaviorImageType('WORD_IMAGE_CLICK')">点选验证码</el-button>
          </el-button-group>
          <div>
            <captcha ref="captcha"
                     :show-close="true"
                     :default-check-url="behaviorImageCheckUrl"
                     :default-gen-url="behaviorImageGenUrl"
                     @check-result="checkHandle"
                     @render-success="renderSuccessHande"
                     background-image="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202308/2937cbc2f89458a8ba1c9f32c3d04c27--745472035.jpg">

            </captcha>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-container>
  </div>
</template>

<script>

import Captcha from "@/components/Captcha"
import qs from 'qs'

export default {
  name: 'App',
  components: {
    Captcha
  },
  created() {
    this.simpleImageForm.timestamp = new Date().getTime()
    this.changeSimpleImageType('spec')
  },
  data() {
    return {
      activeName: 'tab1',
      simpleImageType: '',
      simpleImageGenUrl: 'http://localhost:8088/captcha/simple/gen1?type=',
      simpleImageCheckUrl: 'http://localhost:8088/captcha/simple/check1',
      behaviorImageGenUrl: 'http://localhost:8088/captcha/behavior/gen',
      behaviorImageCheckUrl: 'http://localhost:8088/captcha/behavior/check',
      simpleImageUrl: '',
      simpleImageForm: {
        code: '',
        type: '',
        timestamp: ''
      },
      loading: false
    }
  },
  methods: {
    handleClick(tab) {
      console.log(tab.name);
      if (tab.name==='tab2') {
        this.captchaVisible = true
      }
    },
    changeSimpleImageType(type) {
      this.simpleImageType = type
      this.simpleImageForm.timestamp = new Date().getTime()
      this.simpleImageUrl = this.simpleImageGenUrl + this.simpleImageType + "&timestamp=" + this.simpleImageForm.timestamp
    },
    refreshSimpleImage() {
      this.simpleImageForm.timestamp = new Date().getTime()
      this.simpleImageForm.code = ''
      this.simpleImageUrl = this.simpleImageGenUrl + this.simpleImageType + "&timestamp=" + this.simpleImageForm.timestamp
    },
    verifySimpleImage() {
      this.simpleImageForm.type = this.simpleImageType
      if (!this.simpleImageForm.code) {
        this.$message.error("请输入验证码")
        return
      }
      this.$http.post(this.simpleImageCheckUrl, qs.stringify(this.simpleImageForm)).then(res => {
        if (res.data) {
          this.$message.success("验证成功")
          this.refreshSimpleImage()
        } else {
          this.simpleImageForm.code = ''
          this.$message.error("验证失败")
          this.refreshSimpleImage()
        }
      })
    },
    changeBehaviorImageType(type) {
      this.loading = true
      this.$refs.captcha.changeType(type)
    },
    checkHandle(val) {
      console.log('check-result', val)
      if (val) {
       // this.captchaVisible = false
      }
    },
    renderSuccessHande(val) {
      this.loading = ! val
      console.log('render-success', val)

    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>
